<template>
    <view class="range-number">
        <tr-input type="digit" v-model="min"/>
        <text class="text">至</text>
        <tr-input type="digit" v-model="max"/>
    </view>
</template>
<script setup>
const props = defineProps({
    modelValue: {
        default: null
    }
})

const emits = defineEmits(['update:modelValue'])

const useObjectModel = key => {
    return computed({
        get() {
            if (props.modelValue) {
                return props.modelValue[key]
            }
            return null
        },
        set(val) {
            if (props.modelValue) {
                props.modelValue[key] = val
            } else {
                emits('update:modelValue', {
                    [key]: val
                })
            }
        }
    })
}

const min = useObjectModel('min')
const max = useObjectModel('max')


</script>
<style scoped lang="scss">
.range-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32rpx;
}

.text {
    font-size: 28rpx;
}
</style>
